<template>
  <div class="markdown-body" :style="styles">
    <div v-if="loading">
        <img :src="LoadingIcon" alt="">
    </div>

    <div v-else>
        <MarkdownContent :content="content"></MarkdownContent>
    </div>
  </div>
</template>

<script setup lang="ts">
import LoadingIcon from '@/icons/three_dot.svg';
import MarkdownContent from './MarkdownContent.vue';

const props = defineProps({
  content: {
    type: String,
    required: true,
  },
  fontSize: {
    type: Number,
    required: false,
  },
  loading: {
    type: Boolean,
    required: false,
  },
});

const styles: any = {
    fontSize: `${props.fontSize || 14}px`,
    direction: /[\u0600-\u06FF]/.test(props.content) ? "rtl" : "ltr",
}

</script>

<style scoped></style>
